<template>
  <div class="settle-in-network">
    <!-- //步骤条 -->
    <div style="width:100%;padding:0 280px;">
      <a-steps :current="current">
        <a-step v-for="(item,index) in steps"
                :key="index"
                title=' '>
          <template slot="icon">
            <img class="slotImg"
                 :src="getIconType(item.type, index  <= current)">
          </template>
          <div slot="description"
               :class=" index <= current? 'slotDiv color':'slotDiv' ">
            {{item.title}}
          </div>
        </a-step>
      </a-steps>
    </div>

    <!--各子路由界面-->
    <keep-alive>
      <router-view />
    </keep-alive>

    <!-- //下一步操作 -->

  </div>
</template>

<script>
export default {
  data () {
    return {
      current: 0,
      steps: [
        {
          title: '创建账号',
          type: 0,
        },
        {
          title: '企业认证',
          type: 1,
        },
        {
          title: '平台审核',
          type: 2,
        },
        {
          title: '注册成功',
          type: 3,
        },
      ],
    }
  },

  watch: {
    // 监听路由变化
    "$route.path": function (newVal, oldVal) {
      console.log(newVal, oldVal);
      if (newVal.indexOf('firmApprove2s') !== -1 || newVal.indexOf('firmApprove2sPreview') !== -1
        || newVal.indexOf('supplier') !== -1 || newVal.indexOf('supplierPreview') !== -1) {
        this.current = 1
      }
      if (newVal.indexOf('approve') !== -1) {
        this.current = 2
      }
    }
  },
  mounted () {
    if (window.location.href.indexOf('firmApprove2s') != -1 || window.location.href.indexOf('firmApprove2sPreview') != -1
      || window.location.href.indexOf('supplier') != -1 || window.location.href.indexOf('supplierPreview') != -1) {
      this.current = 1
    }
    if (window.location.href.indexOf('approve') != -1) {
      this.current = 2
    }
  },
  methods: {
    getIconType (type, bool) {
      let src = null
      if (type === 0 && bool === true) {
        src = require('../../../assets/image/enter/mic1.png')
      } else if (type === 0 && bool === false) {
        src = require('../../../assets/image/enter/mic2.png')
      } else if (type === 1 && bool === true) {
        src = require('../../../assets/image/enter/mic1.png')
      } else if (type === 1 && bool === false) {
        src = require('../../../assets/image/enter/mic2.png')
      } else if (type === 2 && bool === true) {
        src = require('../../../assets/image/enter/mic1.png')
      } else if (type === 2 && bool === false) {
        src = require('../../../assets/image/enter/mic2.png')
      } else if (type === 3 && bool === true) {
        src = require('../../../assets/image/enter/mic1.png')
      } else if (type === 3 && bool === false) {
        src = require('../../../assets/image/enter/mic2.png')
      } else if (type === 4 && bool === true) {
        src = require('../../../assets/image/enter/mic1.png')
      } else if (type === 4 && bool === false) {
        src = require('../../../assets/image/enter/mic2.png')
      }
      return src
    },
    prev () {
      this.current--;
    },
  }
}
</script>

<style lang="less" scoped>
.settle-in-network {
  width: @mainViewAreaWidth;
  margin: 24px auto 64px;
  background: #fff;
  overflow: hidden;
  padding: 40px 0;

  /deep/ .ant-steps {
    .ant-steps-item {
      margin-right: 0;
      &:nth-child(1) {
        .ant-steps-item-title::before {
          width: 0;
        }
      }
      &:nth-child(4) {
        .ant-steps-item-container {
          .ant-steps-item-icon {
            margin-right: 16px;
          }
        }
        .ant-steps-item-title::before {
          left: -60px;
        }
      }
      .ant-steps-item-title {
        &::before {
          position: absolute;
          top: 14px;
          left: -50px;
          display: block;
          width: 22px;
          height: 2px;
          background: #f8dfdf;
          content: "";
        }
      }

      .ant-steps-item-title::after {
        background: #f8dfdf;
        top: 14px;
        left: -8px;
      }
    }
  }

  .ant-divider {
    background: #fff;
  }
  .slotDiv {
    margin-left: -63px;
    margin-top: 30px;
    font-size: 14px;
  }
  .slotImg {
    width: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
  }
  .color {
    color: @activeRed;
  }
}
.steps-content {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}

.steps-action {
  margin-top: 24px;
}

/deep/ .ant-anchor-wrapper {
  .ant-anchor-ink {
    &::before {
      width: 6px;
      background: @greyDeepBackground;
    }

    .ant-anchor-ink-ball {
      border: none;
      width: 0;
      height: 0;

      &::after {
        width: 6px;
        height: 40px;
        content: "";
        position: relative;
        top: -17px;
        left: -3px;
        display: inline-block;
        border-radius: 3px;
        background: @activeRed;
      }
    }
  }

  .ant-anchor-link {
    padding: 0 0 0 22px;
    height: 42px;
    line-height: 42px;

    a {
      &:hover {
        color: @activeRed;
      }
    }
  }
}
</style>
